<template>
    <div class="box">
        <div class="box-left">
            <div class="box-left-card">
                <div
                    class="box-left-card-item"
                    v-for="(item, index) in arrData"
                    :key="item.title + index"
                >
                    <p>
                        较上日
                        <span
                            :class="{ 'add': item.add > 0 }"
                        >{{ item.add > 0 ? `+${item.add}` : item.add }}</span>
                    </p>
                    <div>{{ item.num }}</div>
                    <span>{{ item.title }}</span>
                </div>
            </div>
            <div class="box-left-pie"></div>
            <div class="box-left-line"></div>
        </div>
        <div class="box-center">
            <div id="china"></div>
        </div>
        <div style="color: #FFF;" class="box-right table-box">
            <table class="table" v-show="store.item.length > 0">
                <thead ref="thead">
                    <tr>
                        <th>地区</th>
                        <th>新增确证</th>
                        <th>累计确诊</th>
                        <th>治愈</th>
                        <th>死亡</th>
                    </tr>
                </thead>
                <TransitionGroup
                    ref="tbody"
                    enter-active-class="animate__animated animate__flipInY"
                    tag="tbody"
                >
                    <tr
                        v-for="(item, index) in store.item"
                        :key="item.name + item.total.confirm + index"
                    >
                        <td align="center">{{ item.name }}</td>
                        <td align="center">{{ item.today.confirm }}</td>
                        <td align="center">{{ item.total.confirm }}</td>
                        <td align="center">{{ item.total.heal }}</td>
                        <td align="center">{{ item.total.dead }}</td>
                    </tr>
                </TransitionGroup>
            </table>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onBeforeMount, onMounted, onUnmounted, reactive, ref } from 'vue';
import { useStore } from './stores'
import * as echarts from 'echarts'
import './assets/js/china.js'
import { geoCoordMap } from './assets/js/geoMap'
import 'animate.css';


const store = useStore()
let charts: any = null

const thead: any = ref(null)
const tbody: any = ref(null)

const onReszie = () => {
    charts.resize()
}

const initCharts = () => {

    const city = store.list.areaTree[0].children

    const data = city.map(item => {
        return {
            name: item.name,
            value: geoCoordMap[item.name].concat(item.total.nowConfirm),
            children: item.children
        }
    })

    store.item = store.list.areaTree[0].children[7].children

    charts = echarts.init(document.querySelector('#china') as HTMLElement, {}, { renderer: 'svg' })

    charts.setOption({
        geo: {
            map: "china",
            aspectScale: 0.8,
            layoutCenter: ["50%", "50%"],
            layoutSize: "120%",
            roam: true,
            // itemStyle: {
            //     areaColor: {
            //         type: "linear-gradient",
            //         x: 0,
            //         y: 1200,
            //         x2: 1000,
            //         y2: 0,
            //         colorStops: [
            //             {
            //                 offset: 0,
            //                 color: "#152E6E", // 0% 处的颜色
            //             },
            //             {
            //                 offset: 1,
            //                 color: "#0673AD", // 50% 处的颜色
            //             },
            //         ],
            //         global: true, // 缺省为 false
            //     },
            //     shadowColor: "#0f5d9d",
            //     shadowOffsetX: 0,
            //     shadowOffsetY: 15,
            //     opacity: 1,
            //     borderColor: "#1cccff",
            //     borderWidth: 1.8,
            // },

            label: {
                show: true,
                color: "#FFFFFF",
                fontSize: 12,
            },
            itemStyle: {
                areaColor: "#0c3653",
                borderColor: "#1cccff",
                borderWidth: 1.8,
            },
            emphasis: {
                areaColor: "#56b1da",
                label: {
                    show: true,
                    color: "#fff",
                },
            },
            regions: [
                {
                    name: "南海诸岛",
                    itemStyle: {
                        areaColor: "0c3653",
                        borderColor: "#1cccff",
                        opacity: 1,
                        label: {
                            show: true,
                            color: "#009cc9",
                        },
                    },
                    label: {
                        show: true,
                        color: "#FFFFFF",
                        fontSize: 12,
                    },
                },
            ],
        },
        series: [
            {
                type: "map",
                map: "china",
                geoIndex: 0,
                roam: true,
                aspectScale: 0.8,
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: "120%",
                zoom: 1, //当前视角的缩放比例
                scaleLimit: {
                    //滚轮缩放的极限控制
                    min: 1,
                    max: 3,
                },

                data: data,
            },
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin',
                symbolSize: [45, 45],
                symbolOffset: [0, 0],
                label: {
                    show: true,
                    color: '#fff',
                    formatter(value: any) {
                        return value.data.value[2]
                    }
                },
                itemStyle: {
                    color: '#1E90FF', //标志颜色
                },
                data: data,
            },
        ],
    })

    charts.on('click', (e: any) => {
        store.item = e.data.children
        let timer: any = setTimeout(() => {
            if (tbody.value.$el.scrollHeight > tbody.value.$el.clientHeight)
                thead.value.style.width = 'calc(100% - 5px)'
            else
                thead.value.style.width = '100%'

            clearTimeout(timer)
            timer = null
        }, 50)
    })
}

let pie: any = null
const initPie = () => {
    pie = echarts.init(document.querySelector('.box-left-pie') as HTMLElement, {}, { renderer: 'svg' })
    pie.setOption({
        backgroundColor: '#223651',
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '现有确诊',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: true,
                itemStyle: {
                    borderRadius: 4,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '15',
                    }
                },
                labelLine: {
                    show: true
                },
                data: store.cityDetail.map(item => {
                    return {
                        name: item.city,
                        value: item.nowConfirm
                    }
                })
            }
        ]
    })
}

let line: any = null
const initLine = () => {
    line = echarts.init(document.querySelector('.box-left-line') as HTMLElement, {}, { renderer: 'svg' })
    line.setOption({
        backgroundColor: '#223651',
        xAxis: {
            type: 'category',
            data: store.cityDetail.map(item => item.city),
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        label: {
            show: true
        },
        series: [
            {
                data: store.cityDetail.map(item => item.nowConfirm),
                type: 'line',
                smooth: true
            }
        ]
    })
}

onBeforeMount(() => {
    window.addEventListener('resize', onReszie)
})

type ArrData = {
    add: number,
    num: number,
    title: string
}

let arrData = ref<ArrData[]>([])

onMounted(async () => {
    await store.getList()
    arrData.value = [
        {
            add: store.ChinaAdd.localConfirmH5,
            num: store.ChinaTotal.localConfirm,
            title: '本土现有确诊'
        },
        {
            add: store.ChinaAdd.nowConfirm,
            num: store.ChinaTotal.nowConfirm,
            title: '现有确诊'
        },
        {
            add: store.ChinaAdd.confirm,
            num: store.ChinaTotal.confirm,
            title: '累计确诊'
        },
        {
            add: store.ChinaAdd.noInfect,
            num: store.ChinaTotal.noInfect,
            title: '无症状感染者'
        },
        {
            add: store.ChinaAdd.importedCase,
            num: store.ChinaTotal.importedCase,
            title: '境外输入'
        },
        {
            add: store.ChinaAdd.dead,
            num: store.ChinaTotal.dead,
            title: '累计死亡'
        },
    ]
    initCharts()
    initPie()
    initLine()
})

onUnmounted(() => {
    window.removeEventListener('resize', onReszie)
})

</script>

<style lang='less' scoped>
@itemColor: #41b0db;
@itemBg: #223651;
@itemBoder: #212028;
.box {
    height: 100%;
    padding: 15px;
    display: flex;
    background: #0f0c29; /* fallback for old browsers */
    background: -webkit-linear-gradient(
        to right,
        #24243e,
        #110e33,
        #0f0c29
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
        to right,
        #24243e,
        #110e33,
        #0f0c29
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    overflow: hidden;
    &-left {
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        width: 400px;
        color: #fff;
        &-card {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-template-rows: auto auto;
            &-item {
                background-color: @itemBg;
                border: 1px solid @itemBoder;
                padding: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                p {
                    span {
                        color: #d33333;
                        &.add {
                            color: #0ba24a;
                        }
                    }
                }
                div {
                    color: @itemColor;
                    padding: 10px 0;
                    font-size: 20px;
                    font-weight: bold;
                }
            }
        }
        &-pie {
            height: 350px;
            margin-top: 20px;
        }
        &-line {
            height: 320px;
            margin-top: 20px;
        }
    }
    &-center {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        #china {
            width: 100%;
            height: 100%;
        }
    }
    &-right {
        width: 380px;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
}
</style>